<template>
	<div class="hello">
		<template v-for="item in list">
			<div :key='item.id' class="box">
				<transition appear :enter-active-class='"animate__animated "+item.animateEnter'
					:leave-active-class='"animate__animated "+item.animateLeave'>
					<div v-if="item.isShow" class="show-box" :style="{backgroundImage:`url(${item.url})`}"
						@click="onShow(item)"></div>
					<button v-else @click="onShow(item)">{{item.isShow?'隐藏':'显示'}}</button>
				</transition>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				list: [{
						id: Math.random(),
						animateEnter: 'animate__zoomInLeft',
						animateLeave: 'animate__zoomOutLeft',
						isShow: true,
						url: require('../assets/a1.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__fadeInDown',
						animateLeave: 'animate__fadeOutUp',
						isShow: true,
						url: require('../assets/a2.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__fadeInTopRight',
						animateLeave: 'animate__fadeOutTopRight',
						isShow: true,
						url: require('../assets/a3.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__fadeInLeft',
						animateLeave: 'animate__fadeOutLeft',
						isShow: true,
						url: require('../assets/a4.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__flipInY',
						animateLeave: 'animate__flipOutY',
						isShow: true,
						url: require('../assets/a5.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__zoomInLeft',
						animateLeave: 'animate__zoomOutLeft',
						isShow: true,
						url: require('../assets/a6.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__rotateInDownRight',
						animateLeave: 'animate__rotateOutDownRight',
						isShow: true,
						url: require('../assets/a7.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__backInUp',
						animateLeave: 'animate__backOutDown',
						isShow: true,
						url: require('../assets/a8.jpg')
					}, {
						id: Math.random(),
						animateEnter: 'animate__rotateInUpLeft',
						animateLeave: 'animate__rotateOutUpLeft',
						isShow: true,
						url: require('../assets/a9.jpg')
					}

				]
			}
		},
		methods: {
			onShow(item) {
				item.isShow = !item.isShow
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	.hello {
		width: 1200px;
		height: 630px;
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
	}

	.hello>div {
		width: 355px;
		height: 200px;
		margin-bottom: 10px;
		line-height: 200px;
		text-align: center;
	}

	.hello>div button {
		width: 100px;
		border-radius: 50px;
		height: 50px;
		border: none;
		box-shadow: 0 0 10px 10px pink inset;
		color: pink;
		font-weight: bold;
		font-size: 18px;
		cursor: pointer;
	}

	.hello .show-box {
		background-color: red;
		height: 200px;
		background-size: contain;
		background-repeat: no-repeat;
	}
</style>
